<template>
  <div class="swiper-container" v-show="!!this.listImg">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="str in listImg" @click="goDetail(str.id)" :style="{ backgroundImage: 'url(' + str.jpgurl + ')' }">
        <div class="swiperText">{{str.title}}</div>
      </div>
    </div>
    <div class="swiper-pagination "></div>
  </div>
</template>

<script>
  import Swiper from './../../../node_modules/swiper/dist/js/swiper.min';
  import 'swiper/dist/css/swiper.min.css';

  export default {
    props: ['listImg'],
    updated(){

      if(!!this.listImg){
        if(!!this.swiper){
          this.swiper.removeAllSlides()
        }
        this.swiper = new Swiper('.swiper-container', {
          paginationClickable: true,
          loop: true,
          speed: 600,
          autoplay: 4000,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
          },
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          onTouchEnd: function() {
            swiper.startAutoplay()
          }
        })
      }
    },
    methods: {
      goDetail (id){
        this.$router.push('/infoDetail/'+id)
      },
    },
    mounted() {
    },
    data () {
      return {
        swiper:null

      }
    }
  }
</script>

<style lang="less">
  .swiper-container {width: 100%;height: 4.2rem;}
  .swiper-wrapper {width: 100%;height: 100%;}
  .swiper-slide {background-position: center;width: 100%;height: 100%;background-size: 100% 100%;}
  .swiperText{position: absolute;bottom: 0; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;width: 100%; padding: 0 1.3rem 0 .3rem; line-height: .6rem; color: #fff; background: rgba(0, 0, 0, .8);box-sizing: border-box;}
  /*.swiper-pagination-bullet { background: rgba(250, 250, 250, .3);opacity: 1;}*/
  .swiper-pagination-bullet{background: rgba(250, 250, 250, 0.8);}
  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{left: 85% !important;width: 15% !important;bottom: 3% !important;}
  .swiper-pagination-bullet-active{ background: #0084ff;}
</style>
